<template>
  <!-- 新一线学历薪资图 -->
  <div class="barChart"></div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      data: [],
      cityData: [],
      sal1: [],
      sal2: [],
      sal3: [],
      xueliData: [],
    };
  },
  // 父组件传值
  props: {
    rData: Array,
  },
  // 监听函数, oneCityData值变化触发
  watch: {
    rData(newV) {
      console.log(newV, "12");
      if (newV.length > 0) this.setChart();
    },
  },
  methods: {
    setChart() {
      let option = {
        title: {
          text: "各地理分区的平均薪资对比",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
  
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
          },
          data: this.rData.map((item) => item.name),
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: "薪资水平",
            type: "line",
            data: this.rData.map((item) => item.value),
            markPoint: {
              data: [
                { type: "max", name: "Max" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };
      // 获取初始eharts canvas元素
      let myChart = this.$echarts(this.$el);
      // 清空eharts上元素
      myChart.clear();
      // 自适应尺寸
      myChart.resize();
      // 将option参数传入echart元素生成图表
      myChart.setOption(option);
    },
  },
  // 页面生命周期-页面加载时触发mounted
  mounted() {},
};
</script>

<style lang="less" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>